<template>
  <el-select
    :size="size"
    :type="type"
    :placeholder="placeholder"
    :value="value"
    :disabled="disabled"
    :clearable="clearable"
    :multiple="multiple"
    :collapse-tags="collapseTags"
    :value-key="valueKey"
    :filterable="filterable"
    :autocomplete="autocomplete"
    :options="options"
    @input="inputLoad"
    @blur="$emit('blur')"
    @focus="$emit('focus')"
    @clear="$emit('clear')"
    @change="handleSelectChange"
    @visible-change="handleVisibleChange"
  >
    <!-- 下拉数据支持options传进来，也可以slot进来 -->
    <template v-if="options&&options.length>0">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </template>
    <slot v-show="!options" />
  </el-select>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component({
  name: 'MSelect'
})
export default class extends Vue {
  @Prop({ default: 'text' }) private type?: string; // i类型
  @Prop({ default: '' }) private size?: string; //
  @Prop({ default: '' }) private valueKey?: string; //
  @Prop({ default: '' }) private autocomplete?: string; //
  @Prop({ default: '请输入' }) private placeholder?: string; // placeholder
  @Prop({ required: true }) private value?: string | number; //

  @Prop({ default: false }) private disabled?: boolean;
  @Prop({ default: false }) private clearable?: boolean;
  @Prop({ default: false }) private multiple?: boolean;
  @Prop({ default: false }) private filterable?: boolean;
  @Prop({ default: false }) private collapseTags?: boolean;
  @Prop({ default: () => [] }) private options?: any;

  inputLoad(v) {
    this.$emit('input', v)
  }
  handleSelectChange(v) {
    this.$emit('change', v)
  }
  handleVisibleChange(v) {
    this.$emit('visible-change', v)
  }
}
</script>
